<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>欢迎来小圆同志的聊天室</title>
    <link rel="stylesheet" href="/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/chat.css">
    <script src="/socket.io/socket.io.js"></script>
    <script src="/jquery/dist/jquery.min.js"></script>
    <link href="/css/tools.css" rel="stylesheet" />
</head>

<body>
    <div id="app">
        <div class="header">
            <div class="heade-img" style="height: 50px;background-color: #0d6efd;">
                <div class="username" >
                    <h4 style="margin-left: 500px;" >
                        <%for(let i=0;i<data.length;i++){%>
                            <%if(data[i].id==id){%>
                                尊敬的<span>
                                    <%=data[i].username%>
                                </span>用户,您好!
                                <%}%>
                                    <%}%><a href="/" class="outlogin" style="text-decoration:underline; margin-left:18px">退出登录</a>
                    </h4>

                </div>
                
            </div>
        </div>
        <div class="content">
            <div class="on-line">
                <!-- 聊天界面左侧 姓名+在线离线状态 -->
                <%for(let i=0;i<data.length;i++){%>
                    <div class="online-header">
                        <h5 style="margin-top: 80px;">群成员:</h5>
                        <div class="online-header-left">
                            <br><br><br>
                            <h3>
                                <%=data[i].username%>
                            </h3>
                            <hr>
                        </div>
                        <%if(data[i].id==id){%>
                            <div class="online-header-right">
                                <!-- <span>在线</span> -->
                            </div>
                            <%}else{%>
                                <div class="online-header-right">
                                    <!-- <span>离线</span> -->
                                </div>
                                <%}%>
                    </div>
                    <%}%>

            </div>
            <div class="max">
                <div class="max-header">
                    <span style="font-size: 28px;">小圆同志的聊天室</span>
                </div>
                <!-- 聊天的区域 -->
                <div class="top">
                    <div id="enter">
                        <%for(let i=0;i<data.length;i++){%>
                            <%if(data[i].id==id){%>
                                <p>欢迎<%=data[i].username%>来到聊天室</p>
                                <%}%>
                                    <%}%>
                    </div>
                </div>
                <!-- 聊天的区域结束 -->
                <!--数据聊天内容的-->
                <div>
                    <div style="position:relative;width: 100%;">
                        <textarea id="textarea" style="padding:5px;width: 100%;height:88px;"></textarea>
                    </div>
                    <div class="faceDivBox" style="width:800px;height:580px;display:none;">
                        <div class="faceDiv" style="height:580px;">
                            <section class="emoji-box"></section>
                            <div class="tabbox">
                                <section class="emoji-tab"></section>
                            </div>
                        </div>
                        <a class="closeFaceBox" href="javascript:void(0)">×</a>
                    </div>
                </div>
                <div id="kuang">
                    <%for(let i=0;i<data.length;i++){%>
                        <%if(data[i].id==id){%>
                            <!-- 左侧 -->
                            <div class="left">
                                <div class="left-header-img">老板</div>
                                <div class="left-content">
                                    <span class="l mc">老板</span>
                                    <p class="mn">老板~~想你了</p>
                                </div>
                            </div>
                            <!-- 右侧 -->
                            <div class="right">
                                <div class="right-content">
                                    <span class="r cn">
                                        <%=data[i].username%>
                                    </span>
                                    <p class="r oc">老板我也想你~~</p>
                                </div>
                                <div class="right-header-img">
                                    <p class="str">
                                        <%=data[i].username%>
                                    </p>
                                </div>
                            </div>
                            <%}%>
                                <%}%>
                </div>
                <div>
                    <button class="btn btn-primary send">发送</button>
                </div>
            </div>
        </div>
    </div>
    <!-- <h1>我是聊天室</h1> -->
</body>
<script>
    //连接socket.io
    let socket = io.connect('/');

    $('.send').click(function () {
        let text = $('textarea').val();
        let name = $('.cn').html();
        $('textarea').val("");

        let head = $('.right-header-img').html();
        // console.log(text);
        if (text == '') {
            alert('消息不能为空');
            return;
        }

        let me = $('#kuang .right').clone();
        //将用户名和聊天的内容写入都right节点中的名字和内容中
        me.find('.oc').html(text);
        me.find('.cn').html(name);
        me.find('.right-header-img').html(head);
        //将克隆的节点插入上面的div
        $('.top').append(me);
        $('textarea').val("");
        //将信息发送给服务端
        socket.emit('h571', {
            head: head,
            name: name,
            data: text
        });
    })

    //滚动条始终位于最下
    setInterval(function (e) {
        $(".top").scrollTop($(".top")[0].scrollHeight);
    }, 10)

    //按回车发送信息
    $(window).keydown(e => {
        if (e.keyCode == 13) {
            $('.send').trigger('click');
            return false;
        }
    })

    //接收服务端广播的信息
    socket.on('h571', data => {
        console.log(data);
        //克隆left
        let left = $('#kuang .left').clone();
        left.find('.mn').html(data.data);
        left.find('.mc').html(data.name);
        left.find('.left-header-img').html(data.head);
        $('.top').append(left);
    })

    //字符串截取
    let str1 = $('.str').html();
    let str = str1.substr(0, 1);
    console.log(str);
    $('.str').replaceWith(str);//replaceWith被选元素替换为新的内容

</script>

</html>
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script>
    $(document).ready(function () {
        sdEditorEmoj.Init(emojiconfig);
        sdEditorEmoj.setEmoji({ type: 'input', id: "textarea" });
    })
</script>